import React, { useEffect, useState } from 'react';
import type { ColumnsType } from 'antd/es/table';
import { connect } from 'umi';
import { Line } from '@ant-design/plots';
import {
  Badge,
  Card,
  Col,
  Collapse,
  ConfigProvider,
  Descriptions,
  Divider,
  Row,
  Spin,
  Table,
  Typography,
  Layout,
  Tooltip,
} from 'antd';
import ScoreLineChart from './ScoreLineChart';
import UnderSixtyChart from './UnderSixtyChart';
import Detailscore from '../Detailscore';
import LessonAnalysis from './LessonAnalysis';
import RankLineChart from './RankLineChart';
interface DataType {
  key: string;
  stuName: string;
  creditRequired: number;
  creditEarned: number;
  gpa: number;
  classRank: number;
  majorRank: number;
}

const CourseGrades: React.FC<any> = (props: any) => {
  const [data, setData] = useState<DataType[]>([]);
  const { Panel } = Collapse;
  const getAllList = () => {
    if (props.dispatch) {
      props.dispatch({
        //路径：model的namespace+effects函数名
        type: 'Model_StudentAnalysisStudentModel/getGradeSummaryRankEffects',
        payload: {
          data: JSON.parse(props.user.currrentuser).account,
          callback: (value: any) => {
            setData(value);
          },
        },
      });
    }
  };
  useEffect(() => {
    console.log(props.user);
    if (props.user.currrentuser.length != 0) {
      console.log(JSON.parse(props.user.currrentuser));
      getAllList();
    }
  }, [props]);
  return (
    <Layout style={{ backgroundColor: 'white', width: '100%' }}>
      <div>
        <Card style={{ marginBottom: 30 }}>
          <Typography.Title level={4} style={{ marginBottom: 0 }}>
            成绩基本信息
          </Typography.Title>
          <Divider />
          <Descriptions bordered column={3}>
            <Descriptions.Item label="姓名（Name）">
              {data[0]?.stuName}
            </Descriptions.Item>
            <Descriptions.Item label="应修学分（Score-Required）">
              {data[0]?.creditRequired}
            </Descriptions.Item>
            <Descriptions.Item label="已修学分（Score-Earned）" span={1}>
              {data[0]?.creditEarned}
            </Descriptions.Item>
            <Descriptions.Item label="班级排名（Class rank）" span={1}>
              {data[0]?.classRank}
            </Descriptions.Item>
            <Descriptions.Item label="专业排名（Major rank）" span={1}>
              {data[0]?.majorRank}
            </Descriptions.Item>
            <Descriptions.Item label="绩点（GPA）" span={1}>
              {data[0]?.gpa}
            </Descriptions.Item>
          </Descriptions>
        </Card>
        <Detailscore />
        <Card>
          <Typography.Title level={4} style={{ marginBottom: 0 }}>
            第一课堂成绩分析
          </Typography.Title>
          <Divider />
          <Row gutter={8}>
            <Col span={12}>
              <Collapse defaultActiveKey={['1']} span={6}>
                <Panel
                  header={
                    <Tooltip title="展示学生每学年的绩点变化以及和所在班级平均绩点的对比">
                      <div>绩点趋势图</div>
                    </Tooltip>
                  }
                  key="1"
                  forceRender
                >
                  <ScoreLineChart />
                </Panel>
              </Collapse>
            </Col>
            <Col span={12}>
              <Collapse defaultActiveKey={['1']} span={6}>
                <Panel
                  header={
                    <Tooltip title="展示学生每学年班级及年级排名变化">
                      <div>排名趋势图</div>
                    </Tooltip>
                  }
                  key="1"
                  forceRender
                >
                  <RankLineChart />
                </Panel>
              </Collapse>
            </Col>
          </Row>
          <Row gutter={8}>
            <Col span={12}>
              <Collapse defaultActiveKey={['1']} span={6}>
                <Panel
                  header={
                    <Tooltip title="展示学生每学年课程成绩水平">
                      <div>课程成绩分析图</div>
                    </Tooltip>
                  }
                  key="1"
                  forceRender
                >
                  <LessonAnalysis />
                </Panel>
              </Collapse>
            </Col>
            <Col span={12}>
              <Collapse defaultActiveKey={['1']} span={6}>
                <Panel
                  header={
                    <Tooltip title="展示学生每学年挂科科目数量">
                      <div>挂科分析图</div>
                    </Tooltip>
                  }
                  key="1"
                  forceRender
                >
                  <UnderSixtyChart />
                </Panel>
              </Collapse>
            </Col>
          </Row>
        </Card>
      </div>
    </Layout>
  );
};

export default connect(({ Model_StudentAnalysisStudentModel, user }: any) => ({
  Model_StudentAnalysisStudentModel,
  user,
}))(CourseGrades);
